<template>
  <div class="guide">
    <div class="guide-title">
      <div class="guide-title--left">
        <i class="icon el-icon-arrow-left back" @click="backHome"></i><span>{{guideObj.title}}</span>
      </div>
      <div class="guide-title-btn">
        <slot name="button"></slot>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="el-button primary_btn el-button--primary" @click.stop="toTop">直达申请配置</button>
        <el-tooltip class="item" effect="dark" popper-class="reportTip" placement="bottom">
          <div slot="content">
            点击直接滚动到填写申请配置
          </div>
          <span class="tip"><i class="iconfont icon-tixingweizhi"></i></span>
        </el-tooltip>
      </div>
    </div>
    <div class="wrap" :id="randomId">
      <div class="guide-warn">
        <slot name="warn">

        </slot>
      </div>
      <affix label="配置说明" >
        <slot name="directions">

        </slot>
      </affix>
      <affix label="申请配置" :id="randomId + 'config'">
        <slot name="application">

        </slot>
      </affix>
    </div>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix'
  export default {
    name: 'guide',
    components: {
      affix
    },
    data () {
      return {
        randomId: Math.random() + 'id'
      }
    },
    props: {
      guideObj: Object
    },
    computed: {
    },
    methods: {
      backHome () {
        this.$emit('backHome')
      },
      toTop () {
        // 滚到工单配置
        let ele = document.getElementById(this.randomId)
        let achor = document.getElementById(this.randomId + 'config')
        ele.scrollTop = achor.offsetTop - 120
      }
    },
    mounted () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .guide
    .guide-title
      border-bottom 1px solid #ccc
      padding 10px 18px
      position relative
      height 30px
      .guide-title--left
        float left
        padding-top 10px
        font-size 14px
        span
          font-weight bold
        .icon
          color: $c-main
          display: inline-block
          width: 16px
          height: 16px
          line-height: 16px
          border: 1px solid $c-main
          border-radius: 50%
          text-align: center
          margin-right 5px
          cursor pointer
      .guide-title-btn
        position absolute
        right 18px
        .icon-tixingweizhi
          border: 1px solid $c-main
          border-radius: 50%
          display: inline-block
          height: 16px
          width: 16px
          text-align: center
          line-height: 16px
          font-size: 10px
          color $c-main
          margin-left 10px
    .wrap
      height calc(100vh - 120px)
      padding 0 18px 16px
      overflow-y auto
    .guide-warn
      color $c-prompt
      padding 15px 0px
      line-height 18px
</style>
